<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #contanier {
            width: 500px;
            height: 400px;
            border: 2px dashed #7575e7;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <div id="contanier"></div>
    <!-- 1  建立连接 (拨号) -->
    <!-- 2  发消息 接消息 -->
    <!-- 3  关闭连接 -->
    <input type="text" id="message" />
    <button id="btn1">建立连接</button>
    <button id="btn2">发送消息</button>
    <button id="btn3">关闭连接</button>

    <script>
        let dom = document.getElementById('contanier')
        let inputDom = document.getElementById('message')
        let btn1 = document.getElementById('btn1')
        let btn2 = document.getElementById('btn2')
        let btn3 = document.getElementById('btn3')

        let isOpen = false // 表示是否已经建立了拨号
        let ws // 别的方法 也需要使用ws

        btn1.onclick = function () {
            ws = new WebSocket('wss://echo.websocket.org')
            console.log(ws)

            ws.onopen = function () {
                isOpen = true
                console.log('连接成功')

                dom.innerHTML += '<p>与服务器连接成功</p>'
            }

            ws.onmessage = function (e) {
                dom.innerHTML += `<p>服务器说:${e.data}</p>`
            }

            ws.onclose = function () {
                console.log('断开连接')
                dom.innerHTML += '<p>与服务器断开连接</p>'
            }
        }

        //   发送消息 接收消息
        btn2.onclick = function () {
            if (inputDom.value && isOpen) {
                // 发消息 要等到 连接成功才能发 而且内容不为空

                // 发消息就是send
                ws.send(inputDom.value) // 发送消息
                //   发完之后 添加到 当前视图上
                dom.innerHTML =
                    dom.innerHTML + `<p style='color: red'>我说:${inputDom.value}</p>`
                inputDom.value = ''
            }
        }

        btn3.onclick = function () {
            ws.close()
        }
    </script>
</body>

</html>